<div class="wrapper">
  <div class="chat-box" *ngIf="visible">
    <div class="chat-box-header">
      <div class="">
        <div class="operator-status">
          {{operator.status}}
          <span class="operator-status-online">●</span>
          <button class="chat-button-header" (click)="toggleChat()">✕</button>
        </div>
        <img [attr.src]="operator.avatar" class="avatar" />
        <h3 class="operator-name">
          {{operator.name}}
        </h3>
      </div>
    </div>
    <div class="chat-box-main">
      <div class="chat-message-bottom" #bottom></div>
      <ng-container *ngFor="let message of messages">
        <div class="chat-message" [class.chat-message-received]="message.type === 'received'" [class.chat-message-sent]="message.type === 'sent'">
          <div class="chat-message-row">
            <div class="chat-message-from-avatar">
              <img [attr.src]="message.from.avatar" class="avatar" />
            </div>
            <div class="chat-message-text">
              {{message.text}}
            </div>
          </div>
          <div class="chat-message-date">
            {{message.date | date: 'short'}}
          </div>
        </div>
      </ng-container>
    </div>
    <div class="chat-box-footer">
      <textarea type="text" class="chat-input-text" placeholder="请输入..." #message (keydown.enter)="onSubmit()" (keyup.enter)="message.value = ''"
        (keyup.escape)="dismiss.emit()"></textarea>
      <button type="submit" class="chat-input-submit" (click)="onSubmit()">↩︎</button>
    </div>
  </div>
  <button mat-fab class="chat-button" (click)="toggleChat()">
    <span *ngIf="visible">✕</span>
    <span *ngIf="!visible">?</span>
  </button>
</div>
